<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:o="http://omnifaces.org/ui"
>
	<ui:define name="description">
		<p>
			This <code>ResourceHandler</code> implementation will remove all separate script and stylesheet resources which have the
			<code>target</code> attribute set to <code>"head"</code> from the <code>UIViewRoot</code> and create a combined one
			for all scripts and another combined one for all stylesheets when the current JSF project stage is <strong>not</strong> set to
			<code>Development</code>.
		</p>

		<h3>Installation</h3>
		<p>
			This handler must be registered as follows in <code>faces-config.xml</code> in order to get it to run:
		</p>
		<pre class="prettyprint"><code class="lang-xml">
&lt;application&gt;
    &lt;resource-handler&gt;org.omnifaces.resourcehandler.CombinedResourceHandler&lt;/resource-handler&gt;
&lt;/application&gt;
		</code></pre>

		<h3>Usage</h3>
		<p>
			Note should be that the <code>target</code> attribute of <code>&lt;h:outputStylesheet&gt;</code> already defaults to
			<code>"head"</code> but the one of <code>&lt;h:outputScript&gt;</code> not. So if you have placed this inside the
			<code>&lt;h:head&gt;</code>, then you would still need to explicitly set its <code>target</code> attribute to
			<code>"head"</code>, otherwise it will be treated as an inline script and not be combined. This is a design
			limitation.
		</p>
		<pre class="prettyprint"><code class="lang-xml">
&lt;h:head&gt;
    &lt;h:outputStylesheet name="style.css" /&gt;
    &lt;h:outputScript name="script.js" target="head" /&gt;
&lt;/h:head&gt;
		</code></pre>
		<p>
			If you want them to appear <em>after</em> any auto-included resources of standard JSF implementation or JSF
			component libraries, then move the declarations to the <code>&lt;h:body&gt;</code>.
		</p>
		<pre class="prettyprint"><code class="lang-xml">
&lt;h:body&gt;
    &lt;h:outputStylesheet name="style.css" /&gt;
    &lt;h:outputScript name="script.js" target="head" /&gt;
&lt;/h:body&gt;
		</code></pre>

		<h3>Demo</h3>
		<p>
			This resource handler is also  
			<a href="http://code.google.com/p/omnifaces-showcase/source/browse/WebContent/WEB-INF/faces-config.xml">configured</a>
			on this showcase web application. Rightclick the page and <i>View Source</i> and explore the included CSS/JS
			resources. It is recognizeable by library name <code>omnifaces.combined</code>. It are the following ones:
		</p>
		<c:set var="resourceBaseURL" value="#{request.contextPath}/javax.faces.resource/" />
		<ul>
			<ui:repeat value="#{view.getComponentResources(facesContext, 'head')}" var="res">
				<c:set var="resourcePath" value="#{res.attributes.name}.xhtml?ln=#{res.attributes.library}" />
				<li><a href="#{resourceBaseURL}#{resourcePath}">#{resourcePath}</a></li>
			</ui:repeat>
		</ul>
		<o:importConstants type="org.primefaces.util.Constants" var="PrimeFaces" />
		<p>
			The CSS one has combined the four CSS files
			<a href="#{resourceBaseURL}primefaces.css.xhtml?ln=primefaces&amp;v=#{PrimeFaces.VERSION}">primefaces.css</a>,
			<a href="#{resourceBaseURL}css/layout.css.xhtml?ln=layout">layout.css</a>,
			<a href="#{resourceBaseURL}css/showcase.css.xhtml?ln=showcase">showcase.css</a> and 
			<a href="#{resourceBaseURL}css/prettify.css.xhtml?ln=showcase">prettify.css</a>. 
			The JS one has combined the six JS files 
			<a href="#{resourceBaseURL}jquery/jquery.js.xhtml?ln=primefaces&amp;v=#{PrimeFaces.VERSION}">jquery.js</a>,
			<a href="#{resourceBaseURL}primefaces.js.xhtml?ln=primefaces&amp;v=#{PrimeFaces.VERSION}">primefaces.js</a>,
			<a href="#{resourceBaseURL}jquery/jquery-plugins.js.xhtml?ln=primefaces&amp;v=#{PrimeFaces.VERSION}">jquery-plugins.js</a>,
			<a href="#{resourceBaseURL}jsf.js.xhtml?ln=javax.faces">jsf.js</a>,
			<a href="#{resourceBaseURL}omnifaces.js.xhtml?ln=omnifaces">omnifaces.js</a> and
			<a href="#{resourceBaseURL}js/prettify.js.xhtml?ln=showcase">prettify.js</a>. 
			Note that the PrimeFaces <code>theme.css</code> file cannot be combined because it's not been added as a JSF 
			resource, but hardcoded in PrimeFaces' <code>HeadRenderer</code>. There's however a way to get it to be 
			included anyway, but this requires a custom renderer for the <code>&lt;head&gt;</code> wherein the theme 
			name is been hardcoded as <code>@ResourceDependency</code>. See also 
			<a href="http://code.google.com/p/omnifaces/wiki/CombinedResourceHandlerPrimeFacesThemeCss">How to combine PrimeFaces theme.css using CombinedResourceHandler anyway?</a>
		</p>
		<p>
			The generated combined resource URL also includes the "<code>v</code>" request parameter which is the last
			modified time of the newest individual resource in minutes, so that the browser will always be forced to
			request the latest version whenever one of the individual resources has changed.
		</p>
 	</ui:define>		
</ui:composition>